<template>
  <div>
    <!-- 活动档案 -->
    <div class="activityRecord">
      <!-- 一级类别 -->
      <div class="empty_box" v-if="activeContractList.length == 0">
        <p>暂无文件</p>
      </div>
      <div v-else>
        <div class="tabTwo">
          <p class="tabTitle">文档类别</p>
          <ul>
            <li
              v-for="(s, index) in activeContractList"
              :key="s.id"
              :class="[s.id === firstId ? 'isSecon' : '']"
              @click="clickFirst(s, index)"
            >
              <img :src="s.contractTypeIcon" alt="" />
              <p>{{ s.contractTypeName }}</p>
            </li>
          </ul>
          <el-button
            size="mini"
            class="label_more"
            v-if="activeContractList.length > 9"
            @click="labelMore"
            >{{ flagMore ? "更多" : "收起"
            }}<i
              :class="
                flagMore == true ? 'el-icon-caret-bottom' : 'el-icon-caret-top'
              "
            ></i
          ></el-button>
        </div>
        <div class="secondLevel">
          <p class="tabTitle">
            {{ activeContractClass.contractTypeName }}
          </p>
          <ul>
            <li
              v-for="(t, index) in activeList"
              :key="t.id"
              @click="clickThree(t, index)"
              :class="{ tagActive: currentIndex == t.id }"
            >
              <h2>
                {{ t.name }}
                <span
                  class="expiration_time"
                  v-if="t.expiredTime && getDate(t.expiredTime) > 0"
                  >{{ getDate(t.expiredTime) }}天后到期</span
                >
                <span
                  class="expiration_time disExpr"
                  v-if="t.expiredTime && getDate(t.expiredTime) <= 0"
                  >已过期</span
                >
              </h2>
              <!-- <i class="firstWord">{{ isFont(t.property, t.name) }}</i> -->
              <!-- <p class="coll_des" v-html="t.info && t.info[0]"></p> -->
              <div class="item_tishi">
                <span v-if="t.effectiveTime">{{
                  joinTime(t.effectiveTime)
                }}</span>
                <span v-if="t.effectiveTime">·</span>
                <span> {{ t.pageNum }}页 </span> <span>·</span>
                <span> {{ t.from }}</span>
              </div>
              <!-- <p class="coll_source" v-if="t.expiredTime">
                {{ getDate(t.expiredTime) }}
              </p> -->
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
import { getFileListApi } from "@/BMViews/api/tool/fileManage";
export default {
  name: "activityRecord",
  data() {
    return {
      flagMore: true, //更多
      topSearchValue: "",

      currentIndex: "", //默认选择第一项
      list: [], //所有类别的数据
      firstList: [], //一级类别的列表
      fistindex: 0, //一级类别的当前索引
      firstId: "", //当前选中的一级Id
      firstName: "", //当前选中的一级名称

      pageing: { pageNum: 1, pageSize: 100 },
      allActiveList: [], //所有活动数据
      activeContractList: [], //合同活动类别
      activeContractClass: {}, //当前的分类
      activeList: [], //活动档案
    };
  },
  components: {
    NewCard,
  },
  props: {
    //文控id
    circle_id: {
      type: String,
      default: "",
    },
  },
  async created() {
    // await this.getFileboxListApi(); //根据问圈获取文控id
    // await this.getHistoryApiFn();
    this.$bus.$on("updateHistoryList", () => {
      this.getActiveListApiFn();
    });
  },
  beforeDestroy() {
    this.$bus.$off("updateHistoryList");
  },
  async mounted() {
    await this.getActiveListApiFn();
  },
  methods: {
    //输入框改变的时候过滤
    changeValue(value) {
      // if (value) {
      //   this.selectContractBySearchApi(value);
      // }
      //过滤数据 this.topSearchValue
      // this.allList = this.filterList.filter((item) =>
      //   item.name.includes(this.topSearchValue)
      // );
    },
    //  <-------------------------------档案--------------------------------------->
    // 活动档案
    //点击一级类别
    clickFirst(f1, index) {

      this.fistindex = index;
      this.firstId = f1.id;
      this.firstName = f1.contractTypeName;
      //文件列表
      this.activeList = f1.data;
    },
    //获取对应的活动文档列表
    async getActiveListApiFn() {
      // const { pageNum, pageSize } = this.pageing;
      let result = await getFileListApi({
        status: 0,
        fileboxId: this.circle_id,
      });
      if (result.code == 200) {
        this.allActiveList = result.rows;
        if(result.rows.length <=0){//无有效列表
            return
        }
        // 过滤一级类别名称
        var map = {};
        let mapDetailArr = [];
        let newContractList = [];
        this.allActiveList.forEach((item) => {
          newContractList.push(item);
        });
        // this.NavList[1].num = this.allActiveList.length

        let jcontractList = JSON.parse(JSON.stringify(newContractList));
        if (this.activeContractList.length > 0) {
          //判断是否为初始化获取档案列表
          this.activeContractList = [];
        }
        for (var i = 0; i < jcontractList.length; i++) {
          var ai = jcontractList[i];
          if (!map[ai.contractTypeName]) {
            this.activeContractList = [
              ...this.activeContractList,
              {
                contractTypeName: ai.contractTypeName,
                id: ai.contractType,
                contractTypeIcon: ai.contractTypeIcon,
                data: [ai],
              },
            ];
            map[ai.contractTypeName] = ai;
          } else {
            for (var j = 0; j < this.activeContractList.length; j++) {
              var dj = this.activeContractList[j];
              if (dj.contractTypeName == ai.contractTypeName) {
                dj.data.push(ai);
                break;
              }
            }
          }
        }
        this.activeContractClass = this.activeContractList[0];
        this.activeList = this.activeContractList[0].data;
        //默认第一个文章
        this.$emit("onClickList", this.activeList[0]);
        this.currentIndex = this.activeList[0].id;
        this.firstId = this.activeContractList[0].id;
      }
    },
    //点击列表
    clickThree(item, index) {
     
      this.currentIndex = item.id //选中当前文档
      this.$emit("onClickList", item);
    },

    // <-------------------------------档案end--------------------------------------->

    labelMore() {

    },
    // 计算天数
    getDate(endDateStr) {
      var beginDate = this.getCurrentTime().slice(0, 10);
      let startTime = new Date(
        Date.parse(beginDate.replace(/-/g, "/"))
      ).getTime();
      var endDate = endDateStr.slice(0, 10);
      let endTime = new Date(Date.parse(endDate.replace(/-/g, "/"))).getTime();
      var hours = Math.abs(endTime - startTime) / (1000 * 60 * 60 * 24);
      return hours;
    },
    //获取当前时间并打印
    getCurrentTime() {
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      let ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      let gettime = yy + "/" + mm + "/" + dd + " " + hh + ":" + mf + ":" + ss;
      return gettime;
    },
    //拼接日期
    joinTime(time) {
      let newTime = time.replace(/-/g, "");
      return newTime.slice(2);
    },
    // 判断字母类型
    isFont(proper, name) {
      if (proper == 3) {
        return "模";
      } else {
        if (name) {
          let arr = name.split("");
          let reg =
            /^(\d+$|[a-z]+$|[A-Z]+$|[` ~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]+$|((?=[!-~])[^\da-zA-Z])+$)/;
          let str = "";
          for (let i = 0; i < arr.length; i++) {
            if (!reg.test(arr[i])) {
              return arr[i];
            }
          }
        }
      }
    },
  },
};
</script>

<style scoped>
/* 高度 */
::v-deep .label-box-content,
::v-deep .label-box-content .el-row,
::v-deep .label-box-content .el-col,
::v-deep .label-box-content .el-col > div,
::v-deep .label-box-content .el-card,
::v-deep .label-box-content .el-card__body {
  height: 100%;
}

::v-deep .label-box-content .el-card__body {
  position: relative;
  padding: 0 0 30px 0;
}

::v-deep .label-box-content .el-card__body .top {
  margin: 0 30px;
}

::v-deep .label-box-content .el-card__body > div {
  height: 92%;
  overflow-y: auto;
}

::v-deep .label-box-content .el-card__body > div::-webkit-scrollbar {
  width: 0px;
}

ul,
p,
h3 {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 一级类别 */
.tabTitle {
  font-size: 12px;
  color: #999;
  margin: 20px 0;
}

.tabTwo ul {
  display: flex;
  flex-wrap: wrap;
  /* margin: 0 15px; */
}

.tabTwo ul > li {
  width: 20%;
  margin-bottom: 20px;
  text-align: center;
  font-size: 14px;
  color: #333;
  border-bottom: 2px solid #fff;
  cursor: pointer;
  /* border: 1px solid #f87a23; */
}

.tabTwo ul > li > p {
  margin: 10px 0;
}

.tabTwo ul > li > img {
  display: block;
  width: 25px;
  margin: 0 auto;
}

.tabTwo ul > li.isSecon {
  color: #f87a23;
  font-weight: bold;
  border-bottom-color: #f87a23;
}

.tabTwo ul > li:hover {
  /* color: #f87a23; */
  font-weight: bold;
}

.label_more {
  display: block;
  background-color: transparent;
  border: 0;
  margin: 0 auto;
  color: #b9b9b9;
}

/* 活动档案 */
.activityRecord {
  /* padding: 0 30px; */
}

/* 历史档案 */
.historyRecord {
  padding: 0 30px;
}

/* 空盒子 */
.empty_box {
  font-size: 18px;
  text-align: center;
  top: 50%;
  left: 50%;
  /* transform: translate(-50%); */
}

/* 一级 */
.tabOne {
  display: flex;
  justify-content: space-evenly;
  border: 1px solid #e5e6e9;
  background-color: #f9f9f9;
  border-radius: 12px;
  padding: 26px 0;
  margin-bottom: 20px;
  margin-top: 15px;
  margin-left: 30px;
  margin-right: 30px;
}

.tabOne .tablist {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.tabOne .tablist img {
  width: 36px;
}

.tabOne .tablist img.imgsel {
  display: none;
}

.tabOne .tablist.isActive img.imgsel {
  display: block;
}

.tabOne .tablist.isActive img.imgnor {
  display: none;
}

.tabOne .tablist button {
  color: #686975;
  font-size: 16px;
  font-weight: bold;
  background-color: transparent;
  border: 2px solid #c8cce2;
  padding: 6px 20px;
  margin-top: 18px;
}

.tabOne .tablist::before {
  content: "";
  display: none;
  position: absolute;
  bottom: -26px;
  width: 0;
  height: 0;
  border-bottom: 12px solid #e5e6e9;
  border-top: 20px solid transparent;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
}

.tabOne .tablist::after {
  content: "";
  display: none;
  position: absolute;
  bottom: -27px;
  width: 0;
  height: 0;
  border-bottom: 12px solid #fff;
  border-top: 20px solid transparent;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
}

.tabOne .tablist.isActive button,
.tabOne .tablist button:hover {
  color: #fff;
  background-color: #6a769f;
  border-color: #6a769f;
}

.tabOne .tablist.isActive::before {
  display: block;
}

.tabOne .tablist.isActive::after {
  display: block;
}

.secondLevel ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.secondLevel ul > li {
  position: relative;
  /* left: 0;
  top: 0; */
  padding: 5px 10px 18px 20px;
  border-bottom: 1px solid #efefef;
}

.secondLevel ul > li:hover {
  background-color: #f4f5f8;
}

.secondLevel ul > li > i {
  position: absolute;
  left: 20px;
  top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  width: 30px;
  height: 30px;
  background-color: #38476d;
  border-radius: 4px;
  color: #fff;
  font-style: normal;
}

.secondLevel ul > li:nth-child(even) > i {
  background-color: #b1bedf;
}

.secondLevel ul > li > h2 {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin: 0;
  padding-top: 15px;
  padding-bottom: 10px;
}

.secondLevel ul > li .coll_des {
  width: 100%;
  font-size: 13px;
  line-height: 20px;
  margin: 0;
  color: #666;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

.secondLevel ul > li .coll_source {
  margin: 0;
  margin-top: 6px;
  margin-bottom: 12px;
  line-height: 18px;
  font-size: 12px;
  color: #bbb;
}

/* 三级类别的高亮 */
.tagActive {
  background-color: #f4f5f8;
}

/* 四级类别的高亮 */
.class_item_ac {
  background-color: #ecedf0;
}

.class_item_ac .select_title {
  color: #f87a23;
}

/* 文章过期时间 */
.expiration_time {
  position: relative;
  top: -14px;
  /* top:-16rpx; */
  /* right: -100rpx; */
  font-size: 12px;
  color: #ffffff;
  line-height: 0px;
  font-weight: normal;
  padding: 4px 6px;
  margin-left: 6px;
  background: #6c769e;
  border-radius: 10px 0px 10px 0px;
}

.disExpr {
  background-color: #d5d5d5;
}

.item_tishi {
  font-size: 12px;
  color: #b5b5b5;
  /* line-height: 50px; */
}

.item_tishi span {
  margin-left: 5rpx;
}
</style>
